<template>
  <Nav>
    {{ route.query.nav ?? $t('nft.nav') }}
    <template #right>
      <div @click="router.push('/market')">{{ $t('market.nav') }}</div>
    </template>
  </Nav>
  <div class="page-nft">
    <div class="content">
      <template v-for="item in data.area_list">
        <div class="box animate__fadeIn animate__animated animate__faster">
          <template v-if="data.area_complete[item.id]">
            <div v-if="!data.area_complete[item.id].complete" class="right animate__fadeIn animate__animated">
              {{ data.area_complete[item.id].index }} / {{ data.area_complete[item.id].all }}
            </div>
            <div v-else class="right complete animate__flash animate__animated animate__infinite animate__slow" @click.stop="onComplete(item)">
              <span>{{ $t('nft.complete') }}</span>
            </div>
          </template>
          <div class="name wrap" @click="toArea(item)">{{ item.name }}</div>
          <div class="tongji">
            <div class="item max" @click="toArea(item)">
              <div class="title">{{ $t('nft.self') }} / {{ $t('nft.count') }}</div>
              <div class="num"><span class="self"><md-amount :value="Number(data.self_count[item.id] ?? 0)" :precision="0" transition></md-amount></span> / <md-amount :value="Number(data.area_count[item.id] ?? 0)" :precision="0" transition></md-amount></div>
            </div>
            <div class="item" @click="onMarket(item, 'sell')">
              <div class="title">{{ $t('nft.sell') }}</div>
              <div class="num"><md-amount :value="Number(data.market_sell[item.id] ?? 0)" :precision="0" transition></md-amount></div>
            </div>
            <div class="item" @click="onMarket(item, 'buy')">
              <div class="title">{{ $t('nft.buy') }}</div>
              <div class="num"><md-amount :value="Number(data.market_buy[item.id] ?? 0)" :precision="0" transition></md-amount></div>
            </div>
          </div>
          <div class="token">
            <div v-if="data.self_have[item.id]" v-for="token in data.self_have[item.id].area_token" class="item wrap animate__bounceIn animate__animated">
              {{ token.name }}
            </div>
            <div class="btn-group">
              <div class="btn animate__bounceIn animate__animated" v-if="data.self_have[item.id]" @click.stop="trade.open(item)">{{ $t('nft.trade') }}</div>
              <div class="btn sell animate__bounceIn animate__animated" v-if="data.self_have[item.id]" @click.stop="sell.open(item)">{{ $t('nft.sell') }}</div>
              <div class="btn buy" @click.stop="buy.open(item)">{{ $t('nft.buy') }}</div>
            </div>
          </div>
        </div>
      </template>
      <div class="page">
        <md-activity-indicator v-if="loading" type="carousel" color="#5d62a7" :size="15"></md-activity-indicator>
      </div>
    </div>
  </div>
  <Trade ref="trade" @confirm="getData(route.query)" />
  <Sell ref="sell" @confirm="getData(route.query)" />
  <Buy ref="buy" @confirm="getData(route.query)" />
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { toast, dialog } from '@/style'
import { t } from '@/lang'
import { area, asset, complete } from '@/api/nft'
import Nav from '@/components/nav.vue'
import Trade from './trade.vue'
import Sell from './sell.vue'
import Buy from './buy.vue'

const route = useRoute()
const router = useRouter()
const trade = ref(null)
const sell = ref(null)
const buy = ref(null)

const loading = ref(false)
const data = reactive({ 
  area_list: [],
  area_count: {},
  self_count: {},
  self_have: {},
  area_complete: {},
  market_buy: {},
  market_sell: {}
})

// 进入地区
const toArea = (item) => {
  // 如果有下级
  if(item.child_count) {
    router.push({ path: '/nft', query: { level: Number(item.level) + 1, area: item.id, nav: item.name  } })
  }
}

// 监听进入区域
onBeforeRouteUpdate((to) => {
  getArea(to.query)
})

// 加载地区
const getArea = query => {
  loading.value = true
  if(!query.level) {
    query = {
      level: 1,
      area: 1
    }
  }
  data.area_list = []
  area(query.level, query.area).then(res => {
    data.area_list = res.data
    getData(query)
  }).finally(() => {
    loading.value = false
  })
}

// 加载数据
const getData = query => {
  toast(t('nft.load'), 'ring', 0)
  if(!query.level) {
    query = {
      level: 1,
      area: 1
    }
  }
  data.area_count = {}
  data.self_count = {}
  data.self_have  = {}
  data.area_complete = {}
  data.market_sell = {}
  data.market_buy = {}
  asset(query.level, query.area).then(res => {
    data.area_count = res.area_count
    data.self_count = res.self_count
    data.self_have  = res.self_have
    data.market_sell = res.market_sell
    data.market_buy = res.market_buy
    
    // 循环是否可拼成NFT
    const complete = {}
    data.area_list.forEach(item => {
      if(item.child_count > 0) {
        // 如果有下级才显示合成按钮
        complete[item.id] = {
          // 当前进度和全部进度
          index: res.area_complete[item.id],
          all: item.child_count
        }
        // 显示可合成
        complete[item.id].complete = complete[item.id].index >= complete[item.id].all
      }
    })
    data.area_complete = complete
  }).finally(() => {
    toast(false)
  })
}

// 合成拼图
const onComplete = item => {
  dialog.confirm({
    title: t('confirm'),
    content: t('nft.complete_message', { name: item.name }),
    confirmText: t('nft.complete'),
    onConfirm: () => {
      toast(t('nft.complete_load'), 'ring', 0)
      complete(item.id, item.level).then(res => {
        // 重新加载数据
        getData(route.query)
      }).catch(res => {
        toast(false)
        toast(res.message)
      })
    }
  })
}

// 进入交易市场
const onMarket = (item, type) => {
  router.push({ path: '/market', query: {
    level: item.level,
    id: item.id,
    area: item.name,
    type
  }})
}

getArea(route.query)

</script>

<style lang="scss" scoped>
  .page-nft{
    min-height: 100%;
    background: url('@/assets/page.jpg') center center no-repeat;
    background-size: cover;
    background-attachment:fixed;

    .content{
      padding: 130px 30px 10px;
      overflow: hidden;
    }
    
    .page{
      padding: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .box{
      padding: 15px 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      background: linear-gradient(to left, #292d70, #1d0f5e);
      overflow: hidden;
      position: relative;
      transition: all .4s ease;
      
      .name{
        color: #fff;
        font-size: 16px;
        line-height: 25px;
        padding-right: 50px;
        overflow: hidden;
      }
      
      .right{
        position: absolute;
        top: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.15);
        font-size: 14px;
        color: #1cd4b6;
        padding: 5px 10px 5px 13px;
        border-radius: 0 0 0 10px;
        
        &.complete{
          background: #1cd4b6;
          color: #fff;
        }
      }
      
      .tongji{
        margin-top: 10px;
        display: flex;
        text-align: center;
        
        .item{
          width: 25%;
          
          &.max{
            width: 50%;
            text-align: left;
          }
          
          .title{
            color: #5d62a7;
            font-size: 12px;
          }
          .num{
            padding-top: 7px;
            color: #8991f9;
            font-size: 14px;
            
            .self{
              color: #ffc21b;
            }
          }
        }
      }
      
      .token{
        margin-top: 15px;
        background: rgba(0, 0, 0, .15);
        border-radius: 10px;
        padding: 10px;
        
        .item{
          color: #5d62a7;
          font-size: 12px;
          padding-bottom: 7px;
        }
        
        .btn-group{
          display: flex;
          justify-content: center;
        }
        .btn{
          margin: 0 5px;
          border-radius: 50px;
          padding: 5px 20px;
          background: #5d62a7;
          color: #fff;
          text-align: center;
          font-size: 12px;
          
          &.sell{
            background: #1cd4b6; 
          }
          
          &.buy{
            background: #ffc21b; 
          }
        }
      }
    }
  }
</style>